<template>
  <div class="input-box flex-direction-column">
    <el-input v-model="comment" type="textarea" placeholder="请输入内容" maxlength="30" show-word-limit></el-input>
    <el-button type="primary" @click="addUserComment">发布</el-button>
  </div>
</template>

<script>
import { addComment } from '@/api/article'
import { isUserLoggedIn } from '@/utils/auth'
export default {
  name: 'BottomText',
  data() {
    return {
      comment: ''
    }
  },
  props: {
    articleDetail: {
      type: Object,
      default: () => {}
    }
  },
  methods: {
    async addUserComment() {
      if (!isUserLoggedIn()) {
        this.$message.error({
          message: '请先登录',
          offset: 80
        })
        return
      }
      if (this.comment.trim() === '') {
        this.$message.error({
          message: '评论内容不能为空',
          offset: 80
        })
      }
      const params = {
        aid: this.articleDetail._id,
        content: this.comment
      }
      try {
        const res = await addComment(params)
        if (res.code === 200) {
          this.$message.success({
            message: '评论成功',
            offset: 80
          })
        }
        this.comment = ''
        this.$emit('addComment')
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.input-box {
  align-items: flex-end;
  width: 730px;
  padding: 20px;
  margin-top: 20px;
  border-radius: 5px;
  background-color: #fff;
}

::v-deep .el-button {
  margin-top: 20px;
}
</style>
